<template>

  <div>

    <!--  查询-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">


        <el-form-item label="对象类型">
          <el-select v-model="queryParam.type" placeholder="请选择" clearable  >
            <el-option key="site" label="现场" value="site"/>
            <el-option key="component" label="组件" value="component"/>
            <el-option key="app" label="应用" value="app"/>
            <el-option key="product" label="产品" value="product"/>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input placeholder="请输入名称" v-model.trim="queryParam.name" clearable size="mini"></el-input>
        </el-form-item>
        <el-form-item label="父级名称">
          <el-input placeholder="请输入父级名称" v-model.trim="queryParam.parentName" clearable size="mini"></el-input>
        </el-form-item>
        <el-form-item label="保密文件">
          <el-select v-model="queryParam.secrecy" placeholder="请选择" clearable  >
            <el-option key="0" label="非保密" :value="0"/>
            <el-option key="1" label="保密文件" :value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item label="重要文件">
          <el-select v-model="queryParam.core" placeholder="请选择" clearable  >
            <el-option key="0" label="非重要" :value="0"/>
            <el-option key="1" label="重要文件" :value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否文件">
          <el-select v-model="queryParam.folder" placeholder="请选择" clearable  >
            <el-option key="0" label="文件" :value="0"/>
            <el-option key="1" label="文件夹" :value="1"/>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="success" size="mini" @click="getListPage">查询</el-button>
          <el-button type="info" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>

      </el-form>

    </el-card>





    <!--列表-->
    <el-card style="margin-top: 10px">

      <el-table
        :data="tableData"
        max-height="580px"
        height="580px"
        style="width: 100%">


        <el-table-column prop="parentName" label="父级名称" width="150px">
          <template slot-scope="scope">
            <el-image class="folder-icon" v-if="scope.row.parentFolder === 1 " fit="contain" :src="require('@/assets/images/ico/folder-open.png')"/>
            <el-image class="folder-icon" v-if="scope.row.parentFolder === 0" fit="contain" :src="require('@/assets/images/ico/file.png')"/>
            <span>{{scope.row.parentName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="300px">
          <template slot-scope="scope">
            <el-image class="folder-icon" v-if="scope.row.folder === 1 " fit="contain" :src="require('@/assets/images/ico/folder-open.png')"/>
            <el-image class="folder-icon" v-if="scope.row.folder === 0" fit="contain" :src="require('@/assets/images/ico/file.png')"/>
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tempFile" label="是否文件夹">
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.folder === 0">文件</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.folder === 1">文件夹</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bindName" label="绑定值"/>
        <el-table-column prop="tempFile" label="保密文件">
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.secrecy === 0">非保密</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.secrecy === 1">保密</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tempFile" label="重要文件">
          <template slot-scope="scope">
            <el-tag type="danger" size="mini" v-if="scope.row.core === 0">非重要</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.core === 1">重要文件</el-tag>
          </template>
        </el-table-column>


        <el-table-column fixed="right" label="操作" width="60">
          <template slot-scope="scope">
            <el-button v-if="scope.row.fileId" @click="downFile(scope.row)" type="text" size="small"><i class="el-icon-download"></i>下载</el-button>
          </template>
        </el-table-column>

      </el-table>


      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px;"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="pageCurrentChange"
        :page-size="pageConfig.size"
        :current-page="pageConfig.current"
        :pager-count="5"
        :total="pageConfig.total">
      </el-pagination>

    </el-card>


  </div>

</template>

<script>

import http from '@/utils/http'

export default {
  name: "CommonFile",
  components: {

  },
  data() {
    return {
      // 查询参数
      queryParam: {
        type: null,
        name: null,
        parentName: null,
        secrecy: null,
        core: null,
        folder: null,
      },
      // 分页参数
      pageConfig: {
        // 每页记录数
        size: 20,
        // 当前页码
        current: 1,
        // 总记录数
        total: 0,
      },
      // 表格数据
      tableData: [],
    }
  },
  methods: {
    /**
     * 下载文件
     * @param obj 文件
     */
    downFile(obj){
      http.download('/fileStorage/downOutStreamById', { id: obj.fileId }, obj.name);
    },
    /**
     * 分页前重置分页参数
     */
    getPageListBefore() {
      this.pageConfig.current = 1
      this.getListPage()
    },
    /**
     * 重置查询条件
     */
    resetQuery() {
      this.queryParam ={
        type: null,
        name: null,
        parentName: null,
        secrecy: null,
        core: null,
        folder: null,
      }
    },
    /**
     * 分页查询列表
     */
    getListPage() {
      this.queryParam.current = this.pageConfig.current
      this.queryParam.size = this.pageConfig.size
      http.post("/commonUse/getAllCommonUseList", this.queryParam).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        this.pageConfig.total = data.total;
        this.pageConfig.current = data.current;
        this.pageConfig.size = data.size;
        // 表格数据
        this.tableData = data.records

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 分页被改变的时候
     * @param value 当前页
     */
    pageCurrentChange(value) {
      this.pageConfig.current = value
      this.getListPage()
    },
  },
  // 进入马上执行
  mounted() {
    this.getListPage()
    this.$store.commit ('navigationListChange', [
      {name: '全局常用文件', url: '/toCommonFile', query: {}},
    ])
  },
}
</script>



<style scoped>

/*
 文件树的图片 start =========================
 */

.folder-icon{
  width: 20px;
  height: 18px;
  vertical-align: middle;
  margin-right: 5px;
}

</style>
